<script setup lang="ts">
import { ref } from 'vue';
import { Pagination } from '@zebra-ui/swiper/modules'

const modules = ref([Pagination])

const list = ref([
    {
      img: 'https://meizuly-oss.mzxx.top/36a0db4077c24a1f904d6a0106491c52.png',
      title: '华为手机',
      desc: '华为手机，引领科技潮流',
      price: '¥1999'
    },
    {
      img: 'https://meizuly-oss.mzxx.top/d645a43879f84cb89fd2c89f53189e6d.png',
      title: '华为平板',
      desc: '华为平板，畅享高清视界',
      price: '¥2999'
    }, {
      img: 'https://meizuly-oss.mzxx.top/d910be9c54934ca9a03afbba50ba196e.png',
      title: '华为笔记本',
      desc: '华为笔记本，高效办公利器',
      price: '¥3999'
    }])
const tabIndex = ref(1)
const tabList = [ { name:'华为电脑专区', id:1}, { name:'学习办公好搭档', id: 2}, { name:'华为xxx系列',  id: 3},  ]

const tabChange = (id: number) => {
  tabIndex.value = id
}
const moreTabIndex = ref(1)
const moreTabList = [ { name:'电脑专区', id:1}, { name:'平板专区', id: 2}, { name:'华为专区',  id: 3} ]
const moreTabChange = (id: number) => {
  moreTabIndex.value = id
}
</script>

<template>
  <page class="page" custom-overflow="visible">
    <page-template footerBtnTitle="点击查看更多" :footerBtnIcon="true">
        <view class="logo">
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/hw-head.png" mode="aspectFill"></image> 
        </view>
        <z-swiper grabCursor pagination :modules="modules">
            <z-swiper-item v-for="(item, index) in list" :key="index">
                <view class="swiper-item">
                  <image :src="item.img" mode="aspectFill"></image>  
                </view>
            </z-swiper-item>
        </z-swiper>
        <view class="single-item">
          <view class="single-item-top">
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
            <view class="single-item-top-right">
              <view class="single-item-top-right-title">
                <mark-tips></mark-tips>
                <text>Pura 70 Ultra</text>
              </view>
              <view class="single-item-top-right-desc">
                <text>探索未见之美 打开全新视界</text>
              </view>
              <hire-button bgColor="linear-gradient( 180deg, #FF0909 0%, #FF542D 100%)" title="立刻抢租">
                <view class="price-left">
                  <text class="price-left-tip">立减600元</text>
                  <price-box num="15.24" color="#FFF0C7"></price-box>
                </view>
              </hire-button>
            </view>
          </view>
          <view class="single-item-bottom">
            <view class="single-item-bottom-box" v-for="item in 3" :key="item">
              <image src="https://meizuly-oss.mzxx.top/d910be9c54934ca9a03afbba50ba196e.png" mode="aspectFill"></image>
              <view class="single-item-bottom-text">2K E7 超色准屏</view>
            </view>
          </view>
        </view>
        <view class="series">
          <view class="series-item" v-for="item in 4" :key="item"> 
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
            <view class="series-item-right">
               <view class="series-mark">
                  <mark-tips></mark-tips>
                  <discount-button style="margin-left: 10rpx;"></discount-button>
               </view>
               <view class="series-item-title">Pura 70 Ultra</view>
              <hire-button bgColor="linear-gradient( 270deg, #FF0909 0%, #FF542D 100%)" >
                <view class="series-price-left">
                  <price-box num="15.24" color="#FFF0C7"></price-box>
                </view>
              </hire-button>
            </view>
          </view>
        </view>
        <view class="pc">
          <view class="tab-box">
            <view v-for="item in tabList" :key="item.id" class="tab-item" @click="tabChange(item.id)">
              <view class="tab-item-title" :class="tabIndex == item.id ? 'tab-item-title-active' : ''" >{{ item.name }}</view>
              <view class="tab-item-line" :class="tabIndex == item.id ? 'tab-item-line-active' : ''"></view>
            </view>
          </view>
          <view class="pc-content">
            <view class="pc-content-single">
              <view class="img-box">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
              </view>
              <view class="pc-content-single-right">
                <view class="pc-content-single-title">
                  <mark-tips></mark-tips>
                  <text class="text">Pura 70 Ultra</text>
                </view>
                <view class="pc-content-single-desc">探索未见之美 打开全新视界</view>
                <view class="price-wrap">
                  <view class="discount">
                    <view class="discount-title">
                      <view class="discount-title-mark">立减</view>
                      <view class="discount-title-price"><text class="symbol">￥</text><text>600</text></view>
                    </view>
                  </view>
                  <view class="price-btn">
                    <price-box style="margin-left: 20rpx;" num="15.24" color="#FF1717"></price-box>
                    <hire-button  title="立刻抢租"></hire-button>
                  </view>
                </view>
              </view>
            </view>
            <view class="pc-content-list">
              <view class="pc-content-item" v-for="item in 3" :key="item">
                <view class="img-box">
                  <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
                  <view class="discount-mark">立减￥480</view>
                </view>
                <view class="title">Pura 70 Ultra</view>
                <view class="desc">Ultra72024款</view>
                <price-box num="15.24" color="#FF1717"></price-box>
              </view>
            </view>
          </view>
        </view>
        <view class="more">
          <view class="more-head">
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/hw-tb-head.png" mode="aspectFill"></image>
          </view>
          <view class="more-content">
            <view class="more-tab">
              <view class="more-tab-item" v-for="(item, index) in moreTabList" :key="index" :class="{'more-tab-item-active': moreTabIndex === item.id}" @click="moreTabChange(item.id)">
                {{ item.name }}
              </view>
            </view>
            <view class="more-list">
              <view class="more-list-item" v-for="(item, index) in 4" :key="index">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
                <view class="more-mark">
                    <mark-tips></mark-tips>
                    <discount-button style="margin-left: 10rpx;"></discount-button>
                </view>
                <view class="more-title">Pura 70 Ultra</view>
                <hire-button bgColor="linear-gradient( 270deg, #FF0909 0%, #FF542D 100%)"  title="立刻抢租">
                  <view class="more-price-left">
                    <price-box num="15.24" color="#FFF0C7"></price-box>
                  </view>
                </hire-button>
              </view>
            </view>
          </view>
        </view>
    </page-template>
  </page>
</template>
<style lang="scss" scoped>
.page{
    --swiper-pagination-color: #fff;
}
.logo{
    padding: 30rpx 18rpx 20rpx;
    width: 100%;
    image{
        width: 100%;
        height: 258rpx;
    }
}
.swiper-item {
    width: 100%;
    height: 202rpx;
    border-radius: 20rpx;
    border: 4rpx solid #000000;
    display: block;
    image{
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
  .single-item{
    margin-top: 35rpx;
    width: 100%;
    padding: 16rpx;
    background: #ffffff;
    border-radius: 20rpx;
    &-top{
      display: flex;
      image{
        margin-top: -41rpx;
        width: 267rpx;
        height: 205rpx;
      }
      &-right{
        flex: 1;
        margin-top: -4rpx;
        margin-left: 10rpx;
        display:flex;
        flex-direction: column;
        align-items: center;
        &-title{
          margin-left: 10rpx;
          display: flex;
          align-items: center;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          font-size: 34rpx;
          color: #000000;
          line-height: 47rpx;
          text{
            margin-left: 10rpx;
          }
        }
        &-desc{
            margin-top: 4rpx; 
            margin-bottom: 4rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #333333;
            line-height: 36rpx;
        }
      }
    }
  }
.price-left{
  padding-right: 12rpx;
  margin-right: 13rpx;
  position: relative;
  display:flex;
  align-items: baseline;
  &-tip{
    line-height: 53rpx;
    font-family: PingFang SC;
    font-weight: 800;
    font-size: 18rpx;
    color: #FFF0C7;
  }
  &::after{
    position: absolute;
    right: 0;
    top: 8rpx;
    content: "";
    display: inline-block;
    width: 1rpx;
    height: 37rpx;
    background: #FFF0C7;
  }
  &-price{
    font-family: PingFang SC;
    font-weight: bold;
  }
}
.single-item{
  &-bottom{
    margin-top: -18rpx;
    display: flex;
    justify-content: space-between;
    &-box{
      width: 216rpx;
      height: 197rpx;
      background: #FFFFFF;
      box-shadow: inset 0rpx 0rpx 20rpx 1rpx #FFFFFF;
      border-radius: 20rpx;
      border: 1rpx solid #B8B8B8;
      image{
        width: 216rpx;
        height: 142rpx;
        border-radius: 20rpx 20rpx 0 0;
      }
    }
    
    &-text{   
        padding-top: 4rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
        text-align: center;
      }
  }
}
.series{
  margin-top: 20rpx;
  padding: 100rpx 10rpx 6rpx;
  display: flex;
  flex-wrap: wrap;
  width:100%;
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  &-mark{
    display: flex;
    justify-content: center;
  }
  &-item{
    width: calc( 50% - 5rpx);
    padding: 10rpx 6rpx 8rpx;
    display: flex;
    background: #FFFFFF;
    border-radius: 20rpx;
    border: 1rpx solid #B8B8B8;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    &-right{
      margin-left: 6rpx;
    }
    &:nth-child(2n){
      margin-right: 0;
    }
    &-title{
      margin: 4rpx 0;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 29rpx;
      color: #000000;
      line-height: 41rpx;
      text-align: center;
    }
    image{
      width: 112rpx;
      height: 140rpx;
      border-radius: 18rpx;
    }
  }
  &-price-left{
    padding-right: 6rpx;
    margin-right: 7rpx;
    position: relative;
    &::after{
      position: absolute;
      right: 0;
      top: 12rpx;
      content: "";
      display: inline-block;
      width: 1rpx;
      height: 37rpx;
      background: #FFF0C7;
    }
  }
}
.pc{
  margin-top: 20rpx;
  width: 100%;
  padding: 10rpx;
  background: #1D2029;
  border-radius: 20rpx;
  border: 2rpx solid #FFFFFF;
  &-content{
    &-single{
      padding: 12rpx;
      background: #F2F2F2;
      border-radius: 20rpx;
      display: flex;
      .img-box{
        margin-right: 20rpx;
        width: 250rpx;
        height: 250rpx;
        padding: 25rpx 35rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        image{
          width: 180rpx;
          height: 200rpx;
        }
      }
      &-right{
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: center;
        .price-wrap{
          margin-top: 32rpx;
          display: flex;
          .discount{
            width: 204rpx;
            height: 112rpx;
            padding-top: 20rpx;
            padding-right: 40rpx;
            background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/price-icon.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            &-title{
              text-align: right;
              &-mark{
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                font-size: 26rpx;
                color: #FFFFFF;
                line-height: 35rpx;
                text-shadow: 0px 3px 10px #FF0000;
              }
              &-price{
                display: flex;
                justify-content: flex-end;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                font-size: 30rpx;
                color: #FFFFFF;
                height: 42rpx;
                line-height: 42rpx;
                text-shadow: 0px 3px 10px #FF2020;
                .symbol{
                  height: 42rpx;
                  line-height: 42rpx;
                  font-size: 22rpx;
                }
              }
            }
          }
          .price-btn{
            flex:1;
            margin-left: 25rpx;
          }
        }
      }
      &-title{
        padding-left: 16rpx;
        display: flex;
        align-items: center;
        .text{
          margin-left: 8rpx;
        }
      }
      &-desc{
        margin-top: 3rpx;
        padding-left: 20rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
      }
    }
  }
}
.tab{
  &-box{
    flex-shrink: 0;
    padding-top: 20rpx;
    margin-bottom: 14rpx;
    width: 100%;
    display:flex;
    justify-content: space-around;
  }
  &-item{
    
    &-title{
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 39rpx;
      color:#8E9094;
      &-active{
        color: #FFFFFF;
      }
    }
    &-line{
      margin: 14rpx auto 0;
      width: 78rpx;
      height: 4rpx;
      background: transparent;
      border-radius: 2rpx;
      &-active{
          background: #ffffff;
        }
      }
  }
}
.pc-content{
  &-list{
    margin-top:10rpx;
    display: flex;
  }
  &-item{
    margin-right: 13rpx;
    padding: 16rpx 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220rpx;
    height: 322rpx;
    background: #F2F2F2;
    border-radius: 20rpx;
    .title{
      margin: 4rpx 0;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 29rpx;
      color: #000000;
      line-height: 41rpx;
      text-align: center;
    }
    .desc{
      margin-bottom: 6rpx;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20rpx;
      color: #999999;
      line-height: 28rpx;
      text-align: center;
    }
    &:last-child{
      margin-right: 0;
    }
    .img-box{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .discount-mark{
        text-align: center;
        margin-top: -41rpx;
        width: 175rpx;
        height: 51rpx;
        background: linear-gradient( 140deg, #FF279A 0%, #FF3B3B 100%);
        border-radius: 31rpx;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 27rpx;
        color: #FFFFFF;
        line-height: 51rpx;
        text-shadow: 0px 3px 6px rgba(255,0,0,0.16);
        z-index: 100;
      }
      image{
        width: 132rpx;
        height: 148rpx;
      }
    }
  }
}
.more{
  margin: 20rpx 0;
  &-head{
    display:flex;
    justify-content: center;
    image{
      width: 576rpx;
      height: 44rpx;
    }
  }
  &-content{
    margin-top: 20rpx;
  }
  &-tab{
    padding: 15rpx 20rpx;
    display: flex;
    justify-content: space-between;
    background: #FF1E45;
    border-radius: 20rpx;
    border: 2rpx solid #FFFFFF;
    &-item{
      height: 75rpx;
      line-height: 75rpx;
      padding: 0 28rpx;
      background: transparent;
      color: #FFD2DA;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 34rpx;
      &-active{
        background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/hw-tab-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #333333;
      }
    }
  }
  &-list{
    display: flex;
    flex-wrap: wrap;
    &-item{
      margin-top: 10rpx;
      margin-right: 10rpx;
      padding: 10rpx 20rpx;
      width: calc( 50% - 5rpx ); 
      height: 375rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      &:nth-child(2n){
        margin-right: 0;
      }
      image{
        width:196rpx;
        height:200rpx;
      }
    }

  }
  &-mark{
    margin-top: 20rpx;
    margin-bottom: 6rpx;
    display: flex;
  }
  &-title{
    margin-bottom:8rpx;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 29rpx;
    color: #000000;
    line-height: 41rpx;
  }
  &-price-left{
    padding-right: 10rpx;
    margin-right: 11rpx;
    position: relative;
    &::after{
      position: absolute;
      right: 0;
      top: 12rpx;
      content: "";
      display: inline-block;
      width: 1rpx;
      height: 37rpx;
      background: #FFF0C7;
    }
  }
}

</style>
